<template>
  <el-dialog
    class="editDataDialog"
    title="编辑数据"
    :close-on-click-modal="false"
    :modal-append-to-body="true"
    :visible.sync="visible"
    @close="handleCancel"
    :show="show"
    style="text-align:left; overflow:auto;"
    width="750px"
  >
    <el-tabs v-model="tabValue" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="搜索" name="1">
        <formList :show="show" ref="formList"></formList>
      </el-tab-pane>
      <el-tab-pane label="素材库" name="2">
        <materialPage></materialPage>
      </el-tab-pane>
      <el-tab-pane label="其他" name="10">
        <otherPage></otherPage>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="resetForm">重 置</el-button>
      <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import formList from '@/components/chartsType/formList'
import materialPage from '@/components/chartsType/materialPage'
import otherPage from '@/components/chartsType/otherPage'
export default {
  name: 'chartsDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: this.show,
      formLabelWidth: '80px',
      tabValue: '1'
    }
  },
  methods: {
    resetForm() {
      this.clearData([
        { key: 'formData', value: this.oldFormData },
        { key: 'chartsCondition', value: this.oldFormData }
      ])
    },
    // 点击取消和关闭弹窗
    handleCancel() {
      this.setFormData()
      this.$emit('update:show', false)
    },
    // 切换tab菜单
    handleClick(tab, event) {
      if (tab.index && tab.index !== 2) {
        this.setFormData({ data: { statSource: Number(tab.index) + 1 } })
      }
    },
    requestData() {
      let _this = this
      this.$emit('update:show', false)
      this.getConditionData()
      this.setMergeNum()
      this.dispatchNewData({
        type: Number(this.chartsConData.type),
        axios: this.$axios
      }).then(res => {
        _this.setDrawFlag()
      })
    },
    // 点击确定
    confirm() {
      this.setLoading(true)
      this.setshadeDisplay(false)
      this.setChangeArea(true)

      switch (Number(this.formData.statSource)) {
        case 1: // 当前数据为搜索中的数据时
          if (this.formData.type.length > 0) {
            // 当勾选情感属性时，必须选择平台
            if (this.formData.platform !== '') {
              this.requestData()
            } else {
              this.$confirm('提示', {
                title: '提示',
                message: '情感属性与平台为关联属性，请选择平台！',
                // showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(() => {})
                .catch(() => {})
            }
          } else {
            this.requestData()
          }
          break
        case 2: // 当前数据为素材库的数据时
          if (this.formData.statSourceId.length > 0) {
            this.requestData()
          } else {
            this.$confirm('提示', {
              title: '提示',
              message: '请选择素材！',
              // showCancelButton: true,
              confirmButtonText: '确定',
              type: 'warning'
            })
              .then(() => {})
              .catch(() => {})
          }
          break
        case 3: // 当前数据为临时库的数据时
          this.requestData()
          break
        case 4: // 当前数据为上传文件的数据时
          if (this.formData.file !== '') {
            this.requestData()
          } else {
            this.$confirm('提示', {
              title: '提示',
              message: '请上传文件！',
              // showCancelButton: true,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {})
              .catch(() => {})
          }
          break
      }
    },
    ...mapMutations('charts', [
      'setFormData',
      'getConditionData',
      'setTime',
      'setChangeArea',
      'clearData',
      'setLoading',
      'setshadeDisplay',
      'setMergeNum',
      'renderData',
      'setDrawFlag'
    ]),
    ...mapActions('charts', ['dispatchNewData'])
  },
  computed: {
    ...mapState('charts', [
      'formData',
      'chartsCondition',
      'chartsConData',
      'startTime',
      'endTime',
      'oldFormData',
      'resetData'
    ])
  },
  watch: {
    // 监听弹窗的显示和隐藏
    show(val) {
      this.visible = this.show
      if (val) {
        this.resetData && this.resetForm()
        let num = Number(this.chartsCondition.statSource)
        switch (num) {
          case 1:
          case 2:
            if (num === 1) {
              this.setTime({
                key: 'startTime',
                value: this.chartsCondition.issuedataStart
              })
              this.setTime({
                key: 'endTime',
                value: this.chartsCondition.issuedataEnd
              })
            }
            this.tabValue = num.toString()
            break
          default:
            this.tabValue = '10'
        }
      }
    }
  },
  components: {
    formList,
    materialPage,
    otherPage
  }
}
</script>

<style scoped></style>
